/**
@class RefApp.views.Viewport
@extends Ext.form.TabPanel.
This file is base of application. Items that it contains are consecutive panels, which icons we can see at the bottom of a page.
*/
RefApp.views.Viewport = Ext.extend(Ext.TabPanel,
{
	fullscreen: true,
    tabBar: 
    {
        dock: 'bottom',
        layout: 
        {
        	pack: 'center'
        }
    },
    items: [
        { xtype: 'menuCard', onlyPromotions: false, title: 'Menu', store: RefApp.stores.menuStore, iconCls: 'home', id: 'menuCard'},
		{ xtype: 'cartCard', id: 'cart' },
		{ xtype: 'menuCard', onlyPromotions: true, title: 'Promocje', store: RefApp.stores.promotionStore, iconCls: 'favorites'},
		{ xtype: 'infoCard' }
    ],
    listeners:{
    	// listener to beforecardswitch event - change url and call appropriate controller
   		beforecardswitch: function(t, newCard, oldCard, index, animated){
   			var urls = new Array('Menu', 'Cart', 'Promotions', 'About'),
   				hist = Ext.History,
   				action = 'show'+urls[index];
   			Ext.dispatch({
   				controller: 'Menu',
   				action: action,
   				setCard: false
   			});
   			hist.add(urls[index]);
   		}
    }
});	
